Love the theme toggle!

Great work calculating the hearts count from the chatsData! Since we don't need the contents of the array we get from filter, another option is to use a higher order function like array.reduce to take our list of messages and reduce it down to a single value.

// This could be returned from a helper function
// totalLikes is a variable that accumulates a value as we loop over each entry in chatEntries
const likedCount = chatEntries.reduce((totalLikes, currentMessage) => {
    // If currentMessage.liked is true add 1 to totalLikes, else add 0
    return (totalLikes += currentMessage.liked ? 1 : 0);
}, 0); // The 0 here sets the initial value of totalLikes to 0

Nice managing of data & making sure we return a new object when we need to alter a message in our list.

Since we aren't taking any other actions with the mode argument, I think we could factor out the toggleDarkMode function and pass setTheme directly to the DarkMode component.

It can be a little easier to read and understand code when we co-locate variables rather than placing them in-between functions. One possible re-organization could look like:

  const [chatData, setChatData] = useState(CHATS);
  const [theme, setTheme] = useState('App');
  const likedCount = chatData.filter((chat) => chat.liked).length;

  const handleLikedMessages = (id) => {
    setChatData(chatData => chatData.map(chat => {
      if (chat.id === id) {
        return { ...chat, liked: !chat.liked };
      } else {
        return chat;
      }
    }));
  };

  const toggleDarkMode = (mode) => {
    setTheme(mode);
  };

Great use of a variable and interpolated string to form the className value.

Nice use of Prop-Types and flagging those necessary for render with isRequired!.

Nice mapping! 🙌🏻

Nice use of PropTypes.arrayOf and PropTypes.shape!